<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <span id="el">{{msg}}</span>
        <input type="text" v-model="msg">
    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        // 自定义方法
        methods: {
            showMsg() {
                alert('展示方法调用');
            }
        },
        // 计算属性
        computed:{

        },
        //一、初始化
        //第一个-----钩子函数 生命周期 创建之前 beforeCreate
        beforeCreate() {
            console.log('Vue初始化实例:---------进行中------beforeCreate');
            console.log("当前msg:" + this.msg); //undefined
            // this.showMsg(); //报错
        },
        //第二个------钩子函数 生命周期 创建之后 created   ****** 所有方法和数据都初始化完成
        created() {
            console.log('Vue初始化实例:---------完成------created');
            console.log("当前msg:" + this.msg); //hello world
            this.showMsg(); //展示方法调用
        },
        //第三个-----钩子函数 生命周期 挂载之前 beforeMount
        beforeMount() {
            console.log('Vue挂载实例:---------进行中------beforeMount');
            console.log("当前msg:" + this.msg); //hello world
            // 执行时，el和data已经被初始化 但是模板还没有被渲染到页面上
            console.log("当前el:" + document.getElementById('el').innerText); //hello world 没有渲染所以展示 {{msg}}
        },
        //第四个-----钩子函数 生命周期 挂载之后 mounted   
        mounted() {
            console.log('Vue挂载实例:---------完成------mounted');
            console.log("当前msg:" + this.msg); //hello world
            // 执行时，el和data已经被初始化 模板已经被渲染到页面上
            console.log("当前el:" + document.getElementById('el').innerText); //hello world
        },
        //二、运行
        //第五个-----钩子函数 生命周期 更新之前 beforeUpdate   ***** 改变之前 data数据还没有发生改变
        beforeUpdate() {
            console.log('Vue更新实例:---------进行中------beforeUpdate');

            console.log("data数据发生改变之前:" + document.getElementById('el').innerText); //hello world
        },
        //第六个-----钩子函数 生命周期 更新之后 updated 和页面一致化   ***** 改变之后
        updated() {
            console.log('Vue更新实例:---------完成------updated');
            console.log("虚拟dom重新做渲染之后:" + document.getElementById('el').innerText); //hello world
        },

        //三、销毁
        //第七个-----钩子函数 生命周期 销毁之前 beforeDestroy
        beforeDestroy() {
            console.log('Vue销毁实例:---------进行中------beforeDestroy');
        },
        //第八个-----钩子函数 生命周期 销毁之后 destroyed
        destroyed() {
            console.log('Vue销毁实例:---------完成------destroyed');
        }

    })
</script>